<template>
	<div id="login">
		<div align="center">
			<img src="../assets/logo.png" />
		</div>

		<h1>欢迎登录</h1>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
			<el-form-item prop="userName">
				<el-input v-model="ruleForm.userName" placeholder="请输入用户名" prefix-icon="el-icon-user">

				</el-input>
			</el-form-item>
			<el-form-item prop="userPwd">
				<el-input v-model="ruleForm.userPwd" placeholder="请输入密码" prefix-icon="el-icon-lock">

				</el-input>
			</el-form-item>


			<el-form-item prop="verifyCode">
				<el-input v-model="ruleForm.verifyCode" placeholder="请输入验证码" prefix-icon="el-icon-lock">

					<template slot="append"><img id="verifyImg" src="http://localhost:8080/news/kaptcha/kaptcha.jpg" /></template>
				</el-input>

			</el-form-item>

			<el-form-item style="display: flex;justify-content: center;">
				<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios';
	 const service = axios.create({
	   baseURL: '/news' // api base_url
	 })
	export default {
		data() {
			return {
				ruleForm: {
					userName: '',
					userPwd: '',
					verifyCode: ''
				},
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '用户名长度不能小于3',
							trigger: 'blur'
						}
					],
					userPwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '密码不能为空',
							trigger: 'blur'
						}
					],
					verifyCode: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '验证码不能为空',
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			submitForm(formName) {
				let _that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(_that.ruleForm.userName);
						console.log(_that.ruleForm.userPwd);

						service({
						  method: 'post',
						  url: '/user/login.action',
						  data: _that.ruleForm
						}).then(function(response) {
							if(response.data.code == 200){
								_that.$router.push({path:"/"})
							}else{
								alert(response.data.msg)
							}
						}).catch(function (error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	#login {
		width: 500px;
		height: 550px;
		border-radius: 10px;
		box-shadow: 0 0 10px 10px gray;
		margin: 0 auto;
		padding: 20px;
	}

	#login>h1 {
		text-align: center;
	}
	
	#verifyImg{
		height: 40px;
	}
</style>
